<template>
	<view style="padding: 10px 20px">
		<u-form :model="form" ref="formRef" :rules="rules" >
			<u-form-item prop="name" label="托运人(企业)全称"  label-width="125">
				<u-input v-model="form.name" border="none" placeholder="必须填写托运人(企业)全称" readonly="true"/>
			</u-form-item>
			<u-form-item prop="legalPerson" label="企业法人姓名"  label-width="100">
				<u-input v-model="form.legalPerson" border="none" placeholder="必须填写企业法人姓名" readonly="true"/>
			</u-form-item>
			<u-form-item prop="legalPersonPhone" label="企业法人联系方式"  label-width="125">
				<u-input v-model="form.legalPersonPhone" border="none" placeholder="必须填写企业法人联系方式" readonly="true"/>
			</u-form-item>
			<u-form-item prop="address" label="企业通信地址"  label-width="100">
				<u-input v-model="form.address" border="none" placeholder="必须填写企业通信地址" readonly="true"/>
			</u-form-item>
			<u-form-item prop="idNum" label="个人证件号"  label-width="100">
				<u-input v-model="form.idNum" border="none" placeholder="必须填写个人证件号" readonly="true"/>
			</u-form-item>
			<u-form-item prop="remark" label="备注">
				<u-textarea v-model="form.remark" placeholder="备注" height="100" disabled="true" />
			</u-form-item>
			<u-form-item prop="legalPersonIdCardImg" label="法人身份证(正面)" label-width="130" >
				<up-image :show-loading="true" :src="'https://cdn.uviewui.com/uview/album/1.jpg'" width="200rpx" height="100rpx"/>
			</u-form-item>
			<u-form-item prop="businessLicenseImg" label="营业执照" label-width="100" >
				<up-image :show-loading="true" :src="'https://cdn.uviewui.com/uview/album/1.jpg'" width="200rpx" height="100rpx"/>
			</u-form-item>
			<u-form-item prop="contactIdCardImg" label="托运人身份证(正面)" label-width="140" >
				<up-image :show-loading="true" :src="'https://cdn.uviewui.com/uview/album/1.jpg'" width="200rpx" height="100rpx"/>
			</u-form-item>
			<text>以下为申请订单时默认的模板类容，可作为选填</text>
			<u-form-item prop="cargoName" label="默认货物名称" label-width="100">
				<u-input v-model="form.cargoName" border="none" placeholder="默认货物名称" height="140" />
			</u-form-item>
			<u-form-item prop="remark" label="货物种类" label-width="100">
				<u-input v-model="form.remark" border="none" placeholder="货物种类" height="140"/>
			</u-form-item>
			<u-form-item prop="cargoGrossWeight" label="默认货物毛重" label-width="100">
				<u-input v-model="form.cargoGrossWeight" border="none" placeholder="默认货物毛重" height="140"/>
			</u-form-item>
			<u-form-item prop="loadingAddress" label="默认装货点" label-width="100">
				<u-input v-model="form.loadingAddress" border="none" placeholder="默认装货点" height="140" />
			</u-form-item>
			<u-form-item prop="unloadingAddress" label="默认卸货点" label-width="100">
				<u-input v-model="form.unloadingAddress" border="none" placeholder="默认卸货点" height="140"/>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit">提交</u-button>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import constant from "@/utils/constant"
import { useAuthenticationApi } from '@/apis/login'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user'
import { useUserInfoApi } from "@/apis/member"

// onLoad((options: any) =>{
// 	const userInfo = JSON.parse(decodeURIComponent(options.info))
// 	description.value = userInfo.overruleCause
// 	for (const key in form) {
// 		form[key] = userInfo[key]
// 	}
// })
init()
function init(){
	useUserInfoApi().then(res=>{
		for (const key in form) {
				form[key] = res[key]
			}
	})
}

const userStore = useUserStore()
const description = ref("")

const form = reactive({
	id: undefined,
	name: "",
	legalPerson: "",
	legalPersonPhone: "",
	address: "",
	idNum: "",
	remark: "",
	legalPersonIdCardImg: "",
	businessLicenseImg: "",
	contactIdCardImg: "",
	cargoName: "",
	cargoGrossWeight: "",
	loadingAddress: "",	
	unloadingAddress: ""
}) 
const formRef = ref()
const images = reactive<any>({
	legalPersonIdCardImg: [],
	businessLicenseImg: [],
	contactIdCardImg: [],
})
const rules = {
	
}
function deletePic(event, key: string){
  images[key].splice(event.index, 1);
  form[key] = ""
}
	
async function afterRead(event, key: string){
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	const lists: any = [].concat(event.file);
	let fileListLen = images[key].length;
	lists.forEach((item: any) => {
	images[key].push({
	    ...item,
	    status: 'uploading',
		message: '上传中',
		});
	});
	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFilePromise(lists[i].url);
		const item = images[key][fileListLen];
		images[key].splice(fileListLen, 1, {
			...item,
			status: 'success',
			message: '',
			url: result,
		});
		form[key] = JSON.parse(result as string).data
		fileListLen++;
	}
};
	
	
function uploadFilePromise(url){
	return new Promise((resolve) => {
		uni.uploadFile({
			url: constant.uploadUrl, // 仅为示例，非真实的接口地址
			filePath: url,
			name: 'file',
			header: {
				Authorization: userStore.token
			},
			formData: {
			},
			success: (res: any) => {
				setTimeout(() => {
					resolve(res.data);
				}, 1000)
			}
	    });
	});
};
	
function submit(){
	console.log(form);
	formRef.value.validate().then(valid => {
		if(valid){
			uni.showLoading({
				title: "正在提交数据请稍后"
			})
			useAuthenticationApi(form).then(()=> {
				uni.hideLoading()
				uni.redirectTo({
					url: "/pages/authentication/loading"
				})
			})
		}
	})
}
</script>

<style lang="scss">
	.width{
		width: 100rpx;
		height: 100rpx;
	}
.form {
	  margin: 0rpx 10rpx ;
	  // padding: 0 20rpx;
	  border-radius: 10rpx;
	  background-color: #fff;
	  &-item {
	    display: flex;
	    height: 46rpx;
	    // line-height: 86rpx;
	    padding: 10rpx 10rpx;
	    background-color: #fff;
	    font-size: 28rpx;
	    // border-bottom: 1rpx solid #ddd;
	    .label {
	      width: 250rpx;
		  text-align: right;
		  margin-right: 20rpx;
	      color: #333;
	    }
	
	
	  .form-item:last-child {
	    border: none;
	  }
	}
	}
</style>
